<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" th:href="@{'/static/images/favicon.ico'}" media="screen"/>
    <title>登录注册</title>
    <script type="text/javascript" th:src="@{'/static/js/jquery/jquery.min.js'}" language="javascript"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/normalize.css}" href="css/"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/default.css}" href="">
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/loginRegister.css}" href="css/">
</head>
<body>
<div class="htmleaf-container">

    <div class="login-wrap">
        <div class="login-html">
            <input id="tab-1" type="radio" name="tab" class="sign-in" th:checked="${target!='register'}"><label for="tab-1" class="tab">登录</label>
            <input id="tab-2" type="radio" name="tab" class="sign-up" th:checked="${target=='register'}"><label for="tab-2" class="tab">注册</label>
            <div class="login-form">
                <div class="sign-in-htm">
                    <div class="group">
                        <label for="user" class="label">用户名</label>
                        <input id="user" type="text" class="input">
                    </div>
                    <div class="group">
                        <label for="pw" class="label">密码</label>
                        <input id="pw" type="password" class="input" data-type="password">
                    </div>
                    <div class="group">
                        <input id="check" type="checkbox" class="check" checked>
                        <label for="check"><span class="icon"></span> 记住我</label>
                    </div>
                    <div class="group">
                        <p id="error_login" class="error">失败消息</p>
                    </div>
                    <div class="group">
                        <input type="submit" class="button" onclick="login()" value="登录">
                    </div>
                    <div class="hr"></div>
                    <div class="foot-lnk">
                        <a href="#forgot">忘记密码?</a>
                    </div>
                </div>
                <div class="sign-up-htm" >
                    <div class="group">
                        <label for="username" class="label">用户名</label>
                        <input id="username" type="text" class="input" required><p id="register_user_error" class="error">失败消息</p>

                    </div>
                    <div class="group">
                        <label for="password" class="label">密码</label>
                        <input id="password" type="password" class="input" data-type="password" required><p id="register_pwd_error" class="error">失败消息</p>
                    </div>
                    <div class="group">
                        <label for="nikename" class="label">昵称</label>
                        <input id="nikename" type="text" class="input" required><p id="register_nikeError_error" class="error">失败消息</p>
                    </div>
                    <div class="group">
                        <label for="email" class="label">邮箱（可不填）</label>
                        <input id="email" type="email" class="input" required>
                    </div>
                    <div class="group">
                        <label for="QQ" class="label">QQ（可不填）</label>
                        <input id="QQ" type="text" class="input" required>
                    </div>
                    <div class="group">
                        <p id="error_register" class="error">失败消息</p>
                    </div>
                    <div class="group">
                        <input type="submit" class="button" value="注册" onclick="register()">
                    </div>
                    <div class="hr"></div>
                    <div class="foot-lnk">
                        <label for="tab-1">Already Member?</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/

    var url = /*[[@{${url}}]]*/ '';

    /*]]>*/
    function login() {
        $('#error_login').css({"display": "none"});
        // 获取用户名
        var user = $("#user").val();
        // 获取密码
        var password = $("#pw").val();
        $.ajax({
            type: "post",
            url: "login?user=" + user + '&pw=' + password + '&url=' + url,
            success: function (value) {
                var dataJson = JSON.stringify(value);
                var data = JSON.parse(dataJson);
                for (var returnValue in data) {

                    if (returnValue == "success") {
                        if (data[returnValue] == "true") {
                            if (url == "") {
                                window.location.href = "index";
                            } else {
                                window.location.href = url;

                            }
                        }
                    } else if (returnValue == "error") {
                        var errorValue = data[returnValue];
                        for (var error in errorValue) {
                            if (error != "") {
                                // 获取失败显示
                                var errorMsg = $('#error_login');
                                errorMsg.text(errorValue[error]);
                                errorMsg.css({"display": "block"});
                            }
                        }
                    }
                }
            }
        });

    }

    function register() {
        $('#register_user_error').css({"display": "none"});
        $('#register_pwd_error').css({"display": "none"});
        $('#register_nikeError_error').css({"display": "none"});

        // 获取用户名
        var username=$('#username').val();

        // 获取密码
        var password=$('#password').val();

        // 获取邮箱
        var email=$('#email').val();

        // 获取昵称
        var nikename=$('#nikename').val();

        // 获取QQ
        var QQ=$('#QQ').val();
        $.ajax({
            type: "post",
            url: "register",
            data:"user="+username+"&pw="+password+"&email="+email+"&QQ="+QQ+"&nikename="+nikename,
            success: function (value) {
                var dataJson = JSON.stringify(value);
                var data = JSON.parse(dataJson);
                for (var returnValue in data) {

                    if (returnValue == "success") {
                        if (data[returnValue] == "true") {
                                window.location.href = "login";
                        }
                    } else if (returnValue == "error") {
                        var errorValue = data[returnValue];
                        for (var error in errorValue) {
                            if (error != "") {
                                if (error=="userError"){
                                    var userErrorMsg = $('#register_user_error');
                                    userErrorMsg.text(errorValue[error]);
                                    userErrorMsg.css({"display": "block"});
                                }
                                if (error=="pwError") {
                                    var pwdErrorMsg = $('#register_pwd_error');
                                    pwdErrorMsg.text(errorValue[error]);
                                    pwdErrorMsg.css({"display": "block"});
                                }
                                if (error=="nikeError") {
                                    var pwdErrorMsg = $('#register_nikeError_error');
                                    pwdErrorMsg.text(errorValue[error]);
                                    pwdErrorMsg.css({"display": "block"});
                                }
                            }
                        }
                    }
                }
            }
        });
    }
</script>
</body>
</html>